<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multiple Charts in One Page</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>
</head>
<body>
    <div id="chart1" class="chart-container" style="width:1000px; height:600px;"></div>
    <div id="chart2" class="chart-container" style="width:1000px; height:600px;"></div>
    <div id="chart3" class="chart-container" style="width:1000px; height:600px;"></div>
    <div id="chart4" class="chart-container" style="width:1000px; height:600px;"></div>
    <div id="chart5" class="chart-container" style="width:1000px; height:600px;"></div>

    <script>
        // Chart 1: 这里插入第一个图表的初始化和配置代码
        var chart1 = echarts.init(document.getElementById('chart1'), 'white', {renderer: 'canvas'});
        var option1 = {
            Bar(
        init_opts=opts.InitOpts(
            width="1000px",
            height="600px",
            renderer=RenderType.CANVAS,  # 正确使用 RenderType
            page_title='成都岗位工资排行',
            theme=ThemeType.WHITE,
            bg_color='white',  # 背景颜色
        )
    )
    .add_xaxis(companies)
    .add_yaxis(
        series_name="工资",
        y_axis=salaries,
        bar_width='60%',
        label_opts=opts.LabelOpts(is_show=True, position="top", formatter="{c}"),
        itemstyle_opts=opts.ItemStyleOpts(color=colors),  # 为每个柱子设置随机颜色
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="成都地区算法岗位工资排名前10的公司",
            subtitle="数据来源：假设数据",
            pos_top='5%',
            pos_left='center',
            padding=[20, 0, 0, 0],
            title_textstyle_opts=opts.TextStyleOpts(font_weight="bold", font_size=20, color="#FF4500"),
        ),
        toolbox_opts=opts.ToolboxOpts(
            is_show=True,
            feature={
                "saveAsImage": {},
                "restore": {},
                "dataView": {},
                "dataZoom": {},
                "magicType": {"type": ["line", "bar", "stack", "tiled"]},
            },
        ),
        tooltip_opts=opts.TooltipOpts(
            is_show=True,
            formatter="{b} <br/>{c} ({d}%)",
            background_color="rgba(255, 255, 255, 0.9)",
            border_color="#000",
            textstyle_opts=opts.TextStyleOpts(color="#000"),
        ),
        legend_opts=opts.LegendOpts(is_show=False),
        datazoom_opts=[opts.DataZoomOpts(type_="slider"), opts.DataZoomOpts(type_="inside")],
        visualmap_opts=opts.VisualMapOpts(
            type_="color",
            min_=min(salaries),
            max_=max(salaries),
            orient="horizontal",
            pos_top="middle",
            pos_left="right",
            is_piecewise=True,
            pieces=[
                {"min": min(salaries), "max": 15000, "label": "低", "color": "#93CE07"},
                {"min": 15000, "max": 18000, "label": "中", "color": "#FBDB0F"},
                {"min": 18000, "max": 22000, "label": "高", "color": "#FC7D02"},
            ],
        ),
    )
    .set_series_opts(
        markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(name="最大值", coord=[max(companies, key=lambda x: salaries[companies.index(x)]), max(salaries)]),
                opts.MarkPointItem(name="最小值", coord=[min(companies, key=lambda x: salaries[companies.index(x)]), min(salaries)]),
            ]
        ),
        tooltip_opts=opts.TooltipOpts(formatter="{a} <br/>{b} : {c}"),
    )
)

        };
        chart1.setOption(option1);

        // Chart 2: 这里插入第二个图表的初始化和配置代码
        var chart2 = echarts.init(document.getElementById('chart2'), 'white', {renderer: 'canvas'});
        var option2 = {
          timeline = Timeline(init_opts=opts.InitOpts(theme=ThemeType.WHITE))

for date, value in data:
    bar = (
        Bar()
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", value)
        .set_global_opts(title_opts=opts.TitleOpts(title=f"销量数据 - {date}"))
    )
    timeline.add(bar, time_point=date)

# 设置时间轮播图的时间间隔等配置
timeline.add_schema(
    is_auto_play=True,
    play_interval=1000,  # 轮播时间间隔，单位毫秒
    is_loop_play=True,  # 是否循环播放
)
        };
        chart2.setOption(option2);

        // Chart 3: 这里插入第三个图表的初始化和配置代码
        var chart3 = echarts.init(document.getElementById('chart3'), 'white', {renderer: 'canvas'});
        var option3 = {
            Pie(init_opts=opts.InitOpts(width="1000px", height="600px"))
    .add(
        series_name="岗位占比",
        data_pair=[(name, percentage) for name, percentage in zip(jobNames, jobPercentages)],
        radius=["30%", "75%"],  # 设置饼图的内外半径
        center=["50%", "50%"],  # 设置饼图的位置
        label_opts=opts.LabelOpts(
            formatter="{b}: {c} ({d}%)",  # 标签格式化
            position="outside",  # 标签显示在外侧
            color='black',  # 标签字体颜色
            font_size=12,  # 字体大小
            font_style="italic",  # 字体样式
            background_color="rgba(0,0,0,0.2)",  # 标签背景颜色
            border_color="rgba(255,255,255,0.5)",  # 标签边框颜色
            border_width=1,
        ),
        itemstyle_opts=opts.ItemStyleOpts(
            border_width=2,
            border_color="#fff",
        ),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="岗位占比",
            subtitle="各岗位占比分布",
            pos_left="center",
            pos_top="top",
            title_textstyle_opts=opts.TextStyleOpts(font_size=20, font_weight="bold", color="#000"),
        ),
        legend_opts=opts.LegendOpts(
            orient="vertical",
            pos_top="15%",
            pos_left="2%",
            item_width=10,
            item_height=10,
        ),
        tooltip_opts=opts.TooltipOpts(
            trigger="item",
            formatter="{a} <br/>{b}: {c} ({d}%)",
            background_color="rgba(255, 255, 255, 0.9)",
            border_color="#000",
            textstyle_opts=opts.TextStyleOpts(color="#000"),
        ),
    )
)
        };
        chart3.setOption(option3);

        // Chart 4: 这里插入第四个图表的初始化和配置代码
        var chart4 = echarts.init(document.getElementById('chart4'), 'white', {renderer: 'canvas'});
        var option4 = {
            Line(init_opts=opts.InitOpts(width="1000px", height="600px"))
    .add_xaxis(nm)  # 添加X轴数据
    .add_yaxis(
        series_name="工资",
        y_axis=salary,  # 添加Y轴数据
        label_opts=opts.LabelOpts(is_show=False),  # 不显示数据标签
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),  # 区域填充样式
         linestyle_opts=opts.LineStyleOpts(width=2, curve=0.3),  # 线条样式
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="岗位工资分布", subtitle="各岗位工资变化趋势"),
        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross", background_color="rgba(245, 245, 245, 0.8)"),
        legend_opts=opts.LegendOpts(is_show=False),
        xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False, axislabel_opts=opts.LabelOpts(rotate=-15)),
        yaxis_opts=opts.AxisOpts(
            type_="value",
            axislabel_opts=opts.LabelOpts(formatter="{value}元"),
            splitline_opts=opts.SplitLineOpts(is_show=True, linestyle_opts=opts.LineStyleOpts(width=1, color="#e6e6e6")),
        ),
    )
    .set_series_opts(
        markpoint_opts=opts.MarkPointOpts(
            data=[
                opts.MarkPointItem(name="最大值", coord=[max(nm, key=lambda x: salary[nm.index(x)]), max(salary)]),
                opts.MarkPointItem(name="最小值", coord=[min(nm, key=lambda x: salary[nm.index(x)]), min(salary)]),
            ],
            label_opts=opts.LabelOpts(color="#000"),
        ),
        markline_opts=opts.MarkLineOpts(
            data=[opts.MarkLineItem(type_="average", name="平均值")],
            label_opts=opts.LabelOpts(position="end"),
        ),
    )
)

        };
        chart4.setOption(option4);

        // Chart 5: 这里插入第五个图表的初始化和配置代码
        var chart5 = echarts.init(document.getElementById('chart5'), 'white', {renderer: 'canvas'});
        var option5 = {
           map_chart = Map()

# 添加数据到地图
map_chart.add("人工智能岗位平均工资", province_salary_data, "china",
              is_map_symbol_show=False)  # 设置不显示省份名称

# 设置全局配置
map_chart.set_global_opts(
    title_opts=opts.TitleOpts(title="全国省份人工智能岗位平均工资"),
    visualmap_opts=opts.VisualMapOpts(
        min_=13000,  # 设置颜色映射的最小值
        max_=35000,  # 设置颜色映射的最大值
        range_color=[
            "#93CE07", "#FBDB0F", "#FC7D02", "#FF4500", "#9E0142",
            "#3B0A45", "#2E86C1", "#337AB7", "#00BCD4", "#81D4FA",
            "#FFFFFF", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722",
            "#795548", "#607D8B", "#9E9E9E", "#607D8B", "#000000",
        ],
        is_piecewise=True,  # 是否分段显示颜色
    ),
)

        };
        chart5.setOption(option5);
    </script>
</body>
</html>